<template>
  <div>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>单位详细信息</span>
      </div>
      <div class="text item" style="height:600px;overflow-y: auto;overflow-x:visible;">
        <el-collapse v-model="activeName" accordion style="width: 94%;margin:0 auto;">
          <el-collapse-item title="单位信息" name="1">
            <el-form :model="unitEntity" ref="unitEntity"  label-width="100px">
              <el-form-item label="单位名称" >
              <el-input :disabled="true" v-model="unitEntity.name" ></el-input>
            </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单位属性" >
                      <el-select v-model="unitEntity.institutions" :disabled="isInput"  style="width:100%">
                        <el-option
                          v-for="item in dwsxOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单位类别">
              <el-select v-model="unitEntity.businessCategory" :disabled="isInput"  style="width:100%">
                <el-option
                  v-for="item in qylbOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="营业执照号" >
              <el-input :disabled="true" v-model="unitEntity.businessLicense"></el-input>
            </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册类型" >
                    <el-select v-model="unitEntity.typeBusiness" :disabled="isInput" style="width:100%">
                    <el-option
                      v-for="item in qyczlxOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
            <el-form-item label="控股情况">
              <el-select v-model="unitEntity.holdings" :disabled="isInput" style="width:100%">
                <el-option
                  v-for="item in kgqkOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经营范围">
              <el-select v-model="unitEntity.businessScope" :disabled="isInput" style="width:100%">
                <el-option
                  v-for="item in jyfwOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
        <el-form-item label="是否有监控">
              <el-select v-model="unitEntity.monitoring" :disabled="isInput"  style="width:100%">
              <el-option
                v-for="item in monitoringOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
                </el-col>
                <el-col :span="12">

                </el-col>
              </el-row>
             <el-form-item label="单位地址">
              <el-input :disabled="true" v-model="unitEntity.addressName" ></el-input>
            </el-form-item>
            </el-form>

          </el-collapse-item>
          <el-collapse-item title="房屋信息" name="2">
           <el-table
            :data="house_populationList">
            <el-table-column
              prop="addressName"
              label="房间地址"
              width="700px">
            </el-table-column>
            <el-table-column
              prop="dictLabel"
              label="关系"
              >
            </el-table-column>
          </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('handle.cancel') }}</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import { getDictList, getUnitMessage, getPhotoUrl, existIdCard } from "@/utils";
import { imgUrlHost } from '@/config/env'
  export default {
    data () {
      return {
        isInput:true,
         activeName: '1',
        visible: false,
        imgUrlHost:imgUrlHost,
        // 单位信息
        unitEntity: {
          name: '',
          institutions: '',
          businessCategory: '',
          typeBusiness: '',
          holdings: '',
          businessScope: '',
          monitoring: '',
          businessLicense: '',
          addressName:''
        },
        house_populationList: [],
        imageUrl:'',
        nationOptions: [],
        sexOptions: [],
        zjlxOptions: [],
        options: [],
        rklbOptions: [],
        addOrUpdateVisible: false,
        rkzxlbOptions: [],
        dwsxOptions: [], // 单位属性数据
        qylbOptions: [], // 单位类别数据
        qyczlxOptions: [], // 单位注册类型数据
        kgqkOptions: [], // 控股情况数据
        jyfwOptions: [], // 经营范围数据
        monitoringOptions: [] // 是否有监控数据
      }
    },
    methods: {
      init (id) {
        this.activeName = '1'
        this.getSelectData()
        this.visible = true
        this.getUnitMessage(id)
      },
      getUnitMessage (id) {
        this.$http({
          url: `/dg-standard-info/dgactualunit/info/${id}`,
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.unitEntity.name = data.dgActualUnit.name
            this.unitEntity.institutions =data.dgActualUnit.institutions
            this.unitEntity.businessCategory = data.dgActualUnit.businessCategory
            this.unitEntity.typeBusiness = data.dgActualUnit.typeBusiness
            this.unitEntity.holdings = data.dgActualUnit.holdings
            this.unitEntity.businessScope = data.dgActualUnit.businessScope
            this.unitEntity.monitoring = data.dgActualUnit.monitoring
            this.unitEntity.businessLicense = data.dgActualUnit.businessLicense
            this.unitEntity.addressName = data.dgActualUnit.addressVo.addressName
          }
        })
      },
      getSelectData() {
        getDictList('business_category').then(({data}) => {
          this.qylbOptions = data.dictList
        })
        getDictList('institutions').then(({data}) => {
          this.dwsxOptions = data.dictList
        })
        getDictList('type_business').then(({data}) => {
          this.qyczlxOptions = data.dictList
        })
        getDictList('holdings').then(({data}) => {
          this.kgqkOptions = data.dictList
        })
        getDictList('business_scope').then(({data}) => {
          this.jyfwOptions = data.dictList
        })
        getDictList('monitoring').then(({data}) => {
          this.monitoringOptions = data.dictList
        })
    },
    }
  }
</script>
<style>
.el-collapse-item__header {
    height: 70px;
    line-height: 70px;
    font-size: 15px;
}
.el-collapse-item__arrow {
    line-height: 70px;
    font-weight: 500;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 98%;

}
/* 折叠面板打开时出现的样式 */
.el-collapse-item__header.is-active {
    color:#45c2b5;

}
.custom-3E8EF7 .el-input.is-disabled .el-input__inner {
    color: black;
}
</style>
